<div id="sidetabs_body_container">
<?php if(validation_errors() || @$error || @$zero):?>
    <div id="error_container" style='display:block'>
        <div class="notice_explanation_container">
            <div class="notice_explanation bad">
                <strong>Oh lỗi!</strong>&nbsp;&nbsp;<?php echo validation_errors(); ?>
                <?php if(@$error):?>
                <br />
                <?php echo $error?>
                <?php endif;?>
            </div>
        </div>
    </div>
<?php endif;?>
    
    <div class="main_container">
        <div id="detail_header">
          <table class="lean">
            <tbody><tr>
              <td style="padding:5px 10px 0 0" colspan="2"><a href="<?php echo $baseurl?>address" id="list_link">Quản lý địa điểm</a>&nbsp;›
              </td>
              <td>
                <h1 class="db s3name">Danh sách địa điểm</h1>
              </td>
            </tr>
          </tbody></table>
        
          <hr style="clear:both" class="s3"/>
        </div>
        <div id="detail_area">
            <div class="hideport3" id="details_wrapper">
                <div class="left-pos">
                    <?php $attr = array('class' => 'form-target'); echo form_open('', $attr);?>
                    <table class="s3basicedit wiform">
                       <tbody>
                          <tr>
                             <td colspan="2">
                                <h2 class="s3">Thêm địa điểm</h2>
                                <hr style="margin-top: -2px" class="s3"/>
                             </td>
                          </tr>
                          <tr class="base">
                            <input type="hidden" name="id" value="0"/>
                            <input type="hidden" name="type" value="add"/>
                          </tr>
                          <tr class="top">
                             <td class="s3l align-right">Chọn tỉnh <span style="color: red;">(*)</span>:</td>
                             <td class="s3w">
                                <?php echo $fview->selectOption($province, $this->input->post('province'), 'w99', 'province', 'province');?>
                             </td>
                          </tr>
                          <tr class="top">
                             <td class="s3l align-right">Chọn quận huyện <span style="color: red;">(*)</span>:</td>
                             <td class="s3w" id="district_select">
                                <?php echo $fview->selectOption(@$district ? @$district : array('Vui lòng chọn tỉnh thành phố'), $this->input->post('district'), 'w99', 'district', 'district');?>
                             </td>
                          </tr>
                          <tr class="top">
                             <td class="s3l align-right">Tên cửa hàng <span style="color: red;">(*)</span>:</td>
                             <td class="s3w"><input type="text" value="<?php echo $this->input->post('name')?>" name="name" id="name" class="w99"/></td>
                          </tr>
                          <tr class="top">
                             <td class="s3l align-right">Địa chỉ <span style="color: red;">(*)</span>:</td>
                             <td class="s3w"><input type="text" value="<?php echo $this->input->post('address')?>" name="address" id="address" class="w99"/><button id="get-lat-long">GET</button></td>
                          </tr>
                          <tr class="top" id="box-map">
                             <td></td>
                             <td class="s3w" style="position: relative;line-height: normal">
                                <div align="center" id="map" style="width: 350px; height: 200px; position: relative; top: 2%; right: 5px; z-index: 999999; box-shadow: rgb(85, 85, 85) 0px 2px 6px; overflow: hidden; transform: translateZ(0px) translateZ(0px) translateZ(0px) translateZ(0px) translateZ(0px) translateZ(0px); background: rgb(255, 255, 255);"><br/></div>
                                <div class="show_msg" >
                                    Đang tải ...
                                </div>
                                <div class="close-map" >
                                    [ Tắt ]
                                </div>
                             </td>
                          </tr>
                          <tr class="top">
                             <td class="s3l align-right">Lat:</td>
                             <td class="s3w"><input type="text" value="<?php echo $this->input->post('lat')?>" name="lat" id="lat" class="w99"/></td>
                          </tr>
                          <tr class="top">
                             <td class="s3l align-right">Long:</td>
                             <td class="s3w"><input type="text" value="<?php echo $this->input->post('long')?>" name="long" id="lng" class="w99"/></td>
                          </tr>
                          <tr class="top">
                             <td class="s3l align-right">Nhóm mạng <span style="color: red;">(*)</span>:</td>
                             <td class="s3w">
                                <?php echo $fview->selectOption($group, $this->input->post('group'), 'w99', 'group', 'group');?>
                             </td>
                          </tr>
                          <tr class="base">
                             <td colspan="2" class="s3actions">
                                <div>
                                   <table style="margin: 0.5ex auto 0.5ex auto" class="lean">
                                      <tbody>
                                         <tr>
                                            <td><input type="submit" id="submit" value="Save"/> <input class="cancelaj" type="reset" value="Cancel"/></td>
                                         </tr>
                                      </tbody>
                                   </table>
                                </div>
                             </td>
                          </tr>
                       </tbody>
                    </table>
                    </form>
                </div>
                <div class="right-pos">
                    <div style="position:relative" id="client_table" class="flex-table add_col">
                       <table class="filter compact fill">
                       <colgroup>
                             <col>
                             <col width="0*">
                             <col>
                             <col>
                             <col>
                             <col>
                             <col>
                             <col>
                          </colgroup>
                          <thead>
                             <tr class="ft_head">
                                <th class="ft ftl checkbox nodrag checknum checkbox ftlegend" style="width:40px"><input type="checkbox" class="check_all"/></th>
                                <th class="ft ftl undefined nodrag name ftsortable">
                                   <table class="lean">
                                      <tbody>
                                         <tr style="vertical-align:bottom">
                                            <td class="ftlegend">Tên cửa hàng</td>
                                            <td style="padding:0 5px"></td>
                                         </tr>
                                      </tbody>
                                   </table>
                                </th>
                                <th class="ft ftl undefined nodrag name ftsortable">
                                   <table class="lean">
                                      <tbody>
                                         <tr style="vertical-align:bottom">
                                            <td class="ftlegend">Địa chỉ</td>
                                            <td style="padding:0 5px"></td>
                                         </tr>
                                      </tbody>
                                   </table>
                                </th>
                                <th class="ft ftl action ftsortable">
                                   <table class="lean">
                                      <tbody>
                                         <tr style="vertical-align:bottom">
                                            <td class="ftlegend">Tác vụ</td>
                                            <td style="padding:0 5px"></td>
                                         </tr>
                                      </tbody>
                                   </table>
                                </th>
                             </tr>
                          </thead>
                          <tfoot>
                             <tr class="ft_foot">
                                <td colspan="4" class="ft_foot">
                                   <table class="ft_foot">
                                      <tfoot>
                                         <tr class="ft_foot">
                                            <td class="pgnum">
                                                <?php echo $this->pagination->create_links();?>
                                            </td>
                                         </tr>
                                      </tfoot>
                                   </table>
                                </td>
                             </tr>
                          </tfoot>
                          <tbody>
                            <?php
                                if($page_current != 0){
                            	   $page_current = $page_current - 1;
                            	}
                                 
                                $i = 1;
                                foreach($data AS $key => $value):?>
                            <?php
                            
                                $stt = $page_current * $_per_page + $i;

                                $ss = $stt % 2;
                                if ($ss == 0){
                                    $class = 'ftp1';
                                }else{
                                    $class = 'ftp0';
                                }
                            ?>
                            <tr data-idx="<?php echo $stt?>" class="<?php echo $class?>">
                                <td class="ft checkbox nodrag checknum"><input type="checkbox" class="row_check"/>&nbsp;<?php echo $stt?></td>
                                <td class="ft undefined nodrag"><?php echo stripslashes($value->name)?></td>
                                <td class="ft undefined nodrag"><?php echo $value->address?></td>
                                <td class="ft undefined nodrag">
                                    <a data-id="<?php echo $value->id?>" class="editaj" href="#">Sửa</a> | <a class="deleteaj" href="<?php echo $baseurl?>delete-address?id=<?php echo $value->id?>">Xóa</a>
                                </td>
                             </tr>
                            <?php $i++; endforeach;?>
                          </tbody>
                       </table>
                    </div>
                </div>
            </div>
        </div>

    </div>

</div>


<script type="text/javascript">
    $(document).ready(function(){
        $(document).on('change', '#province', function(){
           var id_province = $(this).val();
           $("#district_select").html('<input type="text" value="Đang tải..." class="w99" />');
           $.ajax({
                type: 'GET',
                url: baseUrl + 'get-district',
                data: ({id: id_province}),
                success: function(data)
                {
                    $("#district_select").html(data);
                }
           });
        }); 
        
        $(document).on('click' , '.editaj', function(){
            var id = $(this).data('id');
            
            $.ajax({
                type: "GET",
                url: baseUrl + 'address-detail',
                data: ({id: id}),
                success: function(data){
                    $('.form-target').html(data);
                }
            });
            
            return false;
        });
        $(document).on('click' , '.cancelaj', function(){
            var html = '<table class="s3basicedit wiform"> <tbody> <tr> <td colspan="2"> <h2 class="s3">Thêm địa điểm</h2> <hr style="margin-top: -2px" class="s3"/> </td></tr><tr class="base"> <input type="hidden" name="id" value="0"/> <input type="hidden" name="type" value="add"/> </tr><tr class="top"> <td class="s3l align-right">Chọn tỉnh <span style="color: red;">(*)</span>:</td><td class="s3w"> <?php echo $fview->selectOption($province, $this->input->post('province'), 'w99', 'province', 'province');?> </td></tr><tr class="top"> <td class="s3l align-right">Chọn quận huyện <span style="color: red;">(*)</span>:</td><td class="s3w" id="district_select"> <?php echo $fview->selectOption(array('Vui lòng chọn tỉnh thành phố'), $this->input->post('district'), 'w99', 'district', 'district');?> </td></tr><tr class="top"> <td class="s3l align-right">Tên cửa hàng <span style="color: red;">(*)</span>:</td><td class="s3w"><input type="text" value="<?php echo $this->input->post('name')?>" name="name" id="name" class="w99"/></td></tr><tr class="top"> <td class="s3l align-right">Địa chỉ <span style="color: red;">(*)</span>:</td><td class="s3w"><input type="text" value="<?php echo $this->input->post('address')?>" name="address" id="address" class="w99"/></td></tr><tr class="top" id="box-map"> <td></td><td class="s3w" style="position: relative;line-height: normal"> <div align="center" id="map" style="width: 350px; height: 200px; position: relative; top: 2%; right: 5px; z-index: 999999; box-shadow: rgb(85, 85, 85) 0px 2px 6px; overflow: hidden; transform: translateZ(0px) translateZ(0px) translateZ(0px) translateZ(0px) translateZ(0px) translateZ(0px); background: rgb(255, 255, 255);"><br/></div><div class="show_msg" > Đang tải ... </div><div class="close-map" > [ Tắt] </div></td></tr><tr class="top"> <td class="s3l align-right">Lat:</td><td class="s3w"><input type="text" value="<?php echo $this->input->post('lat')?>" name="lat" id="lat" class="w99"/></td></tr><tr class="top"> <td class="s3l align-right">Long:</td><td class="s3w"><input type="text" value="<?php echo $this->input->post('long')?>" name="long" id="lng" class="w99"/></td></tr><tr class="top"><td class="s3l align-right">Nhóm mạng <span style="color: red;">(*)</span>:</td><td class="s3w"><?php echo $fview->selectOption($group, $this->input->post('group'), 'w99', 'group', 'group');?></td></tr><tr class="base"> <td colspan="2" class="s3actions"> <div> <table style="margin: 0.5ex auto 0.5ex auto" class="lean"> <tbody> <tr> <td><input type="submit" id="submit" value="Save"/> <input type="reset" value="Cancel"/></td></tr></tbody> </table> </div></td></tr></tbody> </table>';
            $('.form-target').html(html);
            
            return false;
        });
        
        $(document).on('click' , '.deleteaj', function(){
            var f = confirm("Bạn muốn xóa địa điểm này");
            if(f){
                return true;
            }else{
                return false;
            }
        });
    });
    
    
    var checkpopup = 1;
    $(function()
    {
       $(document).on('click', '.close-map', function()
       {
            $("#box-map").hide();
            checkpopup = 1;
       });
    });
    
    $(document).on('click', '#get-lat-long', function()
    {
        //checkpopup == 1;
        var txt = $('#address').val() + '' + $('#district option:selected').html() + '' + $('#province option:selected').html();
        console.log( + 'abc');
        $(".show_msg").show();
       
            console.log('checkpopup', checkpopup);
            $("#box-map").css('display', 'table-row');    
        
        checkpopup = 2;
        
        setTimeout(function()
        {
            load();
            setTimeout(function()
            {
                showAddress(txt);  
            }, 1000);  
        }, 1000);
        
        return false;
    });
</script>

<style type="text/css">
#box-map{
    display: none;
}
#box-map td{
    position: relative;
}
#box-map .close-map,
#box-map .show_msg{
    z-index: 999999;
    position: absolute;
    top: 14px;
    left: 3px;
    background: #FFF;
    padding: 6px;
    cursor: pointer;
    color: red;
}
#box-map .show_msg{
    left: auto;
    right: 20px;
    display: none;
}
</style>

<script src="http://maps.google.com/maps?file=api&amp;v=3&amp;key=ABQIAAAAgrj58PbXr2YriiRDqbnL1RSqrCjdkglBijPNIIYrqkVvD1R4QxRl47Yh2D_0C1l5KXQJGrbkSDvXFA" type="text/javascript"></script>
<script type="text/javascript">

function load() {
  if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map"));
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    var center = new GLatLng(48.89364,  	2.33739);
    map.setCenter(center, 15);
    geocoder = new GClientGeocoder();
    var marker = new GMarker(center, {draggable: true});  
    map.addOverlay(marker);
    document.getElementById("lat").value = center.lat().toFixed(5);
    document.getElementById("lng").value = center.lng().toFixed(5);

  GEvent.addListener(marker, "dragend", function() {
    var point = marker.getPoint();
      map.panTo(point);
    document.getElementById("lat").value = point.lat().toFixed(5);
    document.getElementById("lng").value = point.lng().toFixed(5);

    });

  GEvent.addListener(map, "moveend", function() {
	  map.clearOverlays();
      var center = map.getCenter();
	  var marker = new GMarker(center, {draggable: true});
	  map.addOverlay(marker);
	  document.getElementById("lat").value = center.lat().toFixed(5);
      document.getElementById("lng").value = center.lng().toFixed(5);


  GEvent.addListener(marker, "dragend", function() {
     var point =marker.getPoint();
     map.panTo(point);
     document.getElementById("lat").value = point.lat().toFixed(5);
     document.getElementById("lng").value = point.lng().toFixed(5);

    });

    });

  }
}

function showAddress(address) {
   var map = new GMap2(document.getElementById("map"));
   map.addControl(new GSmallMapControl());
   map.addControl(new GMapTypeControl());
   if (geocoder) {
    geocoder.getLatLng(
      address,
      function(point) {
        if (!point) {
        } else {
                $(".show_msg").hide();                    
                document.getElementById("lat").value = point.lat().toFixed(5);
                document.getElementById("lng").value = point.lng().toFixed(5);
                map.clearOverlays()
                map.setCenter(point, 14);
                var marker = new GMarker(point, {draggable: true});  
                map.addOverlay(marker);
                
                GEvent.addListener(marker, "dragend", function() {
                    var pt = marker.getPoint();
                    map.panTo(pt);
                    document.getElementById("lat").value = pt.lat().toFixed(5);
                    document.getElementById("lng").value = pt.lng().toFixed(5);
                });
                GEvent.addListener(map, "moveend", function() {
                    map.clearOverlays();
                    var center = map.getCenter();
                    var marker = new GMarker(center, {draggable: true});
                    map.addOverlay(marker);
                    document.getElementById("lat").value = center.lat().toFixed(5);
                    document.getElementById("lng").value = center.lng().toFixed(5);
                    
                    GEvent.addListener(marker, "dragend", function() {
                        var pt = marker.getPoint();
                        map.panTo(pt);
                        document.getElementById("lat").value = pt.lat().toFixed(5);
                        document.getElementById("lng").value = pt.lng().toFixed(5);
                    });
                
                });
            }
        });
    }
}
</script>